<script>
import { insertCourse } from '@/api/admin/course'
import { selectTeacherOptions } from '@/api/authApi'
import { weeks } from '@/constant'
import courseRules from '@/rules/courseRules'
export default {
  props: ['modelValue'],
  emits: ['update:modelValue', 'resetData'],
  computed: {
    flag: {
      get() {
        return this.modelValue
      },
      set(nv) {
        this.$emit('update:modelValue', nv)
      },
    },
  },
  data() {
    return {
      weeks,
      courseRules,
      teachers: [],
      params: {
        teacher_name: '',
      },
      // 课程异步请求的参数
      courseData: {
        course_teacher_id: '',
        course_name: '',
        course_grade: '',
        course_time: '',
        course_location: '',
        course_credit: '',
        course_max_size: '',
        course_exam_date: '',
        course_exam_location: '',
      },
      courseTime: {
        week: '',
        start: '',
        end: '',
      },
    }
  },
  watch: {
    courseTime: {
      handler(nv) {
        this.courseData.course_time = `${nv.week ?? ''}-${nv.start ?? ''}-${nv.end ?? ''}`
      },
      deep: true,
    },
  },
  methods: {
    async initTeacherOptions() {
      this.teachers = await selectTeacherOptions(this.params)
    },
    remoteMethod(key) {
      this.params.teacher_name = key
      this.initTeacherOptions()
    },
    async addNewCourse() {
      await this.$refs.form.validate()
      await insertCourse(this.courseData)
      this.flag = false
      this.$emit('resetData')
    },
    resetFormData() {
      this.courseData = {}
      this.$refs.form.resetFields()
    },
  },
  created() {
    this.initTeacherOptions()
  },
}
</script>

<template>
  <el-dialog v-model="flag" title="新课程添加" width="600px" @closed="resetFormData">
    <!-- <pre>{{ courseData }}</pre> -->
    <el-form label-width="80px" :inline="false" ref="form" :model="courseData" :rules="courseRules">
      <el-form-item label="课程年级" prop="course_grade">
        <el-input type="number" v-model="courseData.course_grade"></el-input>
      </el-form-item>
      <el-form-item label="课程名称" prop="course_name">
        <el-input v-model="courseData.course_name"></el-input>
      </el-form-item>
      <el-form-item label="课程学分" prop="course_credit">
        <el-input type="number" v-model="courseData.course_credit"></el-input>
      </el-form-item>
      <el-form-item label="授课老师" prop="course_teacher_id">
        <el-select
          clearable
          v-model="courseData.course_teacher_id"
          filterable
          remote
          :remote-method="remoteMethod"
        >
          <el-option
            v-for="t in teachers"
            :key="t.teacher_id"
            :value="t.teacher_id"
            :label="t.count_text"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上课时间" prop="course_time">
        <div class="inline">
          <el-select clearable v-model="courseTime.week">
            <el-option v-for="(w, i) in weeks" :value="i" :label="w"></el-option>
          </el-select>
          <el-select clearable v-model="courseTime.start">
            <el-option v-for="c in 10" :value="c - 1" :label="`第${c}节`"></el-option>
          </el-select>
          <el-select clearable v-model="courseTime.end">
            <el-option v-for="c in 4" :value="c" :label="`共${c}节`"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="上课地点" prop="course_location">
        <el-input v-model="courseData.course_location"></el-input>
      </el-form-item>
      <el-form-item label="座位数" prop="course_max_size">
        <el-input type="number" v-model="courseData.course_max_size"></el-input>
      </el-form-item>
      <el-form-item label="考试时间" prop="course_exam_date">
        <el-date-picker
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          v-model="courseData.course_exam_date"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="考试地点" prop="course_exam_location">
        <el-input v-model="courseData.course_exam_location"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="$emit('update:modelValue', nv)">取消</el-button>
      <el-button type="primary" @click="addNewCourse()">新增</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
:deep(.datetime) {
  width: 100%;
}
.inline {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
}
.inline .el-select {
  flex-grow: 1;
}
</style>
